<!DOCTYPE html>


<html lang="en">
  

    <head>
      <meta charset="utf-8" />
        
      <meta name="description" content="一个简单的博客" />
      
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title>第二篇文章 |  聪葱聪</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/favicon.ico" />
       
<link rel="stylesheet" href="/dist/main.css">

      
<link rel="stylesheet" href="/css/fonts/remixicon.css">

      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.staticfile.org/pace/1.2.4/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    </head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-第二篇文章"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  第二篇文章
</h1>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2023/03/04/%E7%AC%AC%E4%BA%8C%E7%AF%87%E6%96%87%E7%AB%A0/" class="article-date">
  <time datetime="2023-03-04T03:46:35.000Z" itemprop="datePublished">2023-03-04</time>
</a>   
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> Word count:</span>
            <span class="post-count">3.5k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> Reading time≈</span>
            <span class="post-count">14 min</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <h1 id="云尚办公系统：前端基础知识"><a href="#云尚办公系统：前端基础知识" class="headerlink" title="云尚办公系统：前端基础知识"></a>云尚办公系统：前端基础知识</h1><h2 id="1、前端开发介绍"><a href="#1、前端开发介绍" class="headerlink" title="1、前端开发介绍"></a>1、前端开发介绍</h2><p>前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。</p>
<p>最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。</p>
<p>由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。</p>
<p>在日本和一些人口比较稀疏的国家，例如加拿大、澳洲等，流行“Full-Stack Engineer”，也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外，有的公司从产品设计到项目开发再到后期运维可能都是同一个人，甚至可能还要负责UI、配动画，也可以是扫地、擦窗、写文档、维修桌椅等等。</p>
<p>而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确，整个项目开发分为前端、中间层和后端三个开发阶段，这三个阶段分别由三个或者更多的人来协同完成。</p>
<p>国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。</p>
<p>PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML&#x2F;CSS&#x2F;JavaScript（PC&#x2F;移动端网页，实现网页端的视觉展示和交互-前端工程师）</p>
<h2 id="2、下载和安装VS-Code"><a href="#2、下载和安装VS-Code" class="headerlink" title="2、下载和安装VS Code"></a>2、下载和安装VS Code</h2><h3 id="2-1、下载地址"><a href="#2-1、下载地址" class="headerlink" title="2.1、下载地址"></a>2.1、下载地址</h3><p><a target="_blank" rel="noopener" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></p>
<h3 id="2-2、插件安装"><a href="#2-2、插件安装" class="headerlink" title="2.2、插件安装"></a>2.2、插件安装</h3><p>为方便后续开发，建议安装如下插件</p>
<p><img src="D:\Downloads\学习\java\课件\课件\images\2.前端基础知识\image-20220225153946727.png" alt="image-20220225153946727"></p>
<h3 id="2-3、创建项目"><a href="#2-3、创建项目" class="headerlink" title="2.3、创建项目"></a>2.3、创建项目</h3><p>vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。</p>
<p>然后打开vscode，再在vscode里面选择 File -&gt; Open Folder 打开文件夹，这样才可以创建项目。</p>
<h3 id="2-4、保存工作区"><a href="#2-4、保存工作区" class="headerlink" title="2.4、保存工作区"></a>2.4、保存工作区</h3><p>打开文件夹后，选择“文件 -&gt; 将工作区另存为…”，为工作区文件起一个名字，存储在刚才的文件夹下即可</p>
<h3 id="2-5、新建文件夹和网页"><a href="#2-5、新建文件夹和网页" class="headerlink" title="2.5、新建文件夹和网页"></a>2.5、新建文件夹和网页</h3><h3 id="2-6、预览网页"><a href="#2-6、预览网页" class="headerlink" title="2.6、预览网页"></a>2.6、预览网页</h3><p><strong>以文件路径方式打开网页预览</strong></p>
<p>需要安装“open in browser”插件：</p>
<p>文件右键 -&gt; Open In Default Browser</p>
<p><strong>以服务器方式打开网页预览</strong></p>
<p>需要安装“Live Server”插件：</p>
<p>文件右键 -&gt; Open with Live Server</p>
<h3 id="2-7、设置字体大小"><a href="#2-7、设置字体大小" class="headerlink" title="2.7、设置字体大小"></a>2.7、设置字体大小</h3><p>左边栏Manage -&gt; settings -&gt; 搜索 “font” -&gt; Font size</p>
<h2 id="二、ES6入门"><a href="#二、ES6入门" class="headerlink" title="二、ES6入门"></a>二、ES6入门</h2><h3 id="1、ECMAScript-6-简介"><a href="#1、ECMAScript-6-简介" class="headerlink" title="1、ECMAScript 6 简介"></a>1、ECMAScript 6 简介</h3><p>ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。</p>
<h3 id="2、基本语法"><a href="#2、基本语法" class="headerlink" title="2、基本语法"></a>2、基本语法</h3><p>本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。</p>
<h4 id="2-1、模板字符串"><a href="#2-1、模板字符串" class="headerlink" title="2.1、模板字符串"></a>2.1、模板字符串</h4><p>创建 模板字符串.html</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2、字符串插入变量和表达式。变量名写在 $&#123;&#125; 中，$&#123;&#125; 中可以放入 JavaScript 表达式。</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&quot;Mike&quot;</span></span><br><span class="line"><span class="keyword">let</span> age = <span class="number">27</span></span><br><span class="line"><span class="keyword">let</span> info = <span class="string">`My Name is <span class="subst">$&#123;name&#125;</span>,I am <span class="subst">$&#123;age+<span class="number">1</span>&#125;</span> years old next year.`</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info)</span><br><span class="line"><span class="comment">// My Name is Mike,I am 28 years old next year.</span></span><br></pre></td></tr></table></figure>

<h4 id="2-2、对象拓展运算符"><a href="#2-2、对象拓展运算符" class="headerlink" title="2.2、对象拓展运算符"></a>2.2、对象拓展运算符</h4><p>创建 对象拓展运算符.html</p>
<p>拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、拷贝对象</span></span><br><span class="line"><span class="keyword">let</span> person1 = &#123;<span class="attr">name</span>: <span class="string">&quot;Amy&quot;</span>, <span class="attr">age</span>: <span class="number">15</span>&#125;</span><br><span class="line"><span class="keyword">let</span> someone = &#123; ...person1 &#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(someone)  <span class="comment">//&#123;name: &quot;Amy&quot;, age: 15&#125;</span></span><br></pre></td></tr></table></figure>



<h4 id="2-3、箭头函数"><a href="#2-3、箭头函数" class="headerlink" title="2.3、箭头函数"></a><strong>2.3、箭头函数</strong></h4><p>创建 箭头函数.html</p>
<p>箭头函数提供了一种更加简洁的函数书写方式。基本语法是：<code>参数 =&gt; 函数体</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传统</span></span><br><span class="line"><span class="keyword">var</span> f1 = <span class="keyword">function</span>(<span class="params">a</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> a</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">f1</span>(<span class="number">1</span>))</span><br><span class="line"><span class="comment">// ES6</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">f2</span> = a =&gt; a</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">f2</span>(<span class="number">1</span>))</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 当箭头函数没有参数或者有多个参数，要用 () 括起来。</span></span><br><span class="line"><span class="comment">// 当箭头函数函数体有多行语句，用 &#123;&#125; 包裹起来，表示代码块，</span></span><br><span class="line"><span class="comment">// 当只有一行语句，并且需要返回结果时，可以省略 &#123;&#125; , 结果会自动返回。</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">f3</span> = (<span class="params">a,b</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> result = a+b</span><br><span class="line">    <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">f3</span>(<span class="number">6</span>,<span class="number">2</span>))  <span class="comment">// 8</span></span><br><span class="line"><span class="comment">// 前面代码相当于：</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">f4</span> = (<span class="params">a,b</span>) =&gt; a+b</span><br></pre></td></tr></table></figure>

<p>箭头函数多用于匿名函数的定义</p>
<h2 id="三、Vue基础"><a href="#三、Vue基础" class="headerlink" title="三、Vue基础"></a>三、Vue基础</h2><h3 id="1、入门"><a href="#1、入门" class="headerlink" title="1、入门"></a>1、入门</h3><h4 id="1-1、Vue-js-是什么"><a href="#1-1、Vue-js-是什么" class="headerlink" title="1.1、Vue.js 是什么"></a>1.1、Vue.js 是什么</h4><p>Vue (读音 &#x2F;vjuː&#x2F;，类似于 view) 是一套用于构建用户界面的渐进式框架。</p>
<p>Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>官方网站：<a target="_blank" rel="noopener" href="https://cn.vuejs.org/">https://cn.vuejs.org</a> </p>
<h4 id="1-2、示例"><a href="#1-2、示例" class="headerlink" title="1.2、示例"></a>1.2、示例</h4><p>创建 demo.html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- id标识vue作用的范围 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &#123;&#123;&#125;&#125; 插值表达式，绑定vue中的data数据 --&gt;</span></span><br><span class="line">    &#123;&#123; message &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建一个vue对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,<span class="comment">//绑定vue作用的范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;<span class="comment">//定义页面中显示的模型数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统</p>
<p>这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作</p>
<h3 id="2、实例生命周期"><a href="#2、实例生命周期" class="headerlink" title="2、实例生命周期"></a>2、实例生命周期</h3><p><img src="C:\Users\Administrator\Desktop\software\尚医通项目md格式笔记（16天版本）V1.2\尚医通项目md格式笔记V1.2\尚医通笔记\img\0.9177152660737906.png" alt="Vue å®ä¾çå½å¨æ"></p>
<p>创建 vue实例的生命周期.html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        &#123;&#123;info&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">info</span>:<span class="string">&#x27;hello atguigu&#x27;</span> </span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">created</span>(<span class="params"></span>) &#123; <span class="comment">//渲染前</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">debugger</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;created....&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">mounted</span>(<span class="params"></span>) &#123; <span class="comment">//渲染后</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">debugger</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;mounted....&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3、Axios"><a href="#3、Axios" class="headerlink" title="3、Axios"></a>3、Axios</h3><p>Axios是独立于Vue的一个项目，基于promise用于浏览器和node.js的http客户端</p>
<ul>
<li><p>在浏览器中可以帮助我们完成 ajax请求的发送</p>
</li>
<li><p>在node.js中可以向远程接口发送请求</p>
<p><strong>引入vue和axios的js文件</strong></p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>进行axios调用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">memberList</span>: []<span class="comment">//数组</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">created</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">getList</span>()</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">getList</span>(<span class="params">id</span>) &#123;</span><br><span class="line">            axios.<span class="title function_">get</span>(<span class="string">&#x27;data.json&#x27;</span>)</span><br><span class="line">            .<span class="title function_">then</span>(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(response)</span><br><span class="line">                <span class="variable language_">this</span>.<span class="property">memberList</span> = response.<span class="property">data</span>.<span class="property">data</span>.<span class="property">items</span></span><br><span class="line">            &#125;)</span><br><span class="line">            .<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>创建data.json文件</strong></p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;success&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;code&quot;</span><span class="punctuation">:</span><span class="number">20000</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;message&quot;</span><span class="punctuation">:</span><span class="string">&quot;成功&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;data&quot;</span><span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;list&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line">            <span class="punctuation">&#123;</span><span class="attr">&quot;name&quot;</span><span class="punctuation">:</span><span class="string">&quot;lucy&quot;</span><span class="punctuation">,</span><span class="attr">&quot;age&quot;</span><span class="punctuation">:</span><span class="number">20</span><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="punctuation">&#123;</span><span class="attr">&quot;name&quot;</span><span class="punctuation">:</span><span class="string">&quot;mary&quot;</span><span class="punctuation">,</span><span class="attr">&quot;age&quot;</span><span class="punctuation">:</span><span class="number">30</span><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="punctuation">&#123;</span><span class="attr">&quot;name&quot;</span><span class="punctuation">:</span><span class="string">&quot;jack&quot;</span><span class="punctuation">,</span><span class="attr">&quot;age&quot;</span><span class="punctuation">:</span><span class="number">40</span><span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p><strong>控制台查看输出</strong></p>
<h2 id="四、Node-js入门"><a href="#四、Node-js入门" class="headerlink" title="四、Node.js入门"></a>四、Node.js入门</h2><h3 id="1、Node-js简介"><a href="#1、Node-js简介" class="headerlink" title="1、Node.js简介"></a>1、Node.js简介</h3><h4 id="1-1、什么是Node-js"><a href="#1-1、什么是Node-js" class="headerlink" title="1.1、什么是Node.js"></a>1.1、什么是Node.js</h4><p>简单的说 Node.js 就是运行在服务端的 JavaScript。</p>
<p>Node.js是一个事件驱动I&#x2F;O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</p>
<h4 id="1-2、Node-js有什么用"><a href="#1-2、Node-js有什么用" class="headerlink" title="1.2、Node.js有什么用"></a>1.2、Node.js有什么用</h4><p>如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。</p>
<p>Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。</p>
<p>当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。</p>
<h3 id="2、Node-js安装"><a href="#2、Node-js安装" class="headerlink" title="2、Node.js安装"></a>2、Node.js安装</h3><h4 id="2-1、下载"><a href="#2-1、下载" class="headerlink" title="2.1、下载"></a>2.1、下载</h4><p>官网：<a target="_blank" rel="noopener" href="https://nodejs.org/en/">https://nodejs.org/en/</a> </p>
<p>中文网：<a target="_blank" rel="noopener" href="http://nodejs.cn/">http://nodejs.cn/</a> </p>
<p>LTS：长期支持版本</p>
<p>Current：最新版</p>
<h4 id="2-2、安装和查看版本"><a href="#2-2、安装和查看版本" class="headerlink" title="2.2、安装和查看版本"></a>2.2、安装和查看版本</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>

<h3 id="3、简单入门"><a href="#3、简单入门" class="headerlink" title="3、简单入门"></a>3、简单入门</h3><p>创建 01-控制台程序.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Hello Node.js&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>进入到程序所在的目录，输入</p>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node <span class="number">01</span>-控制台程序.js</span><br></pre></td></tr></table></figure>

<p>浏览器的内核包括两部分核心：</p>
<ul>
<li>DOM渲染引擎；</li>
<li>js解析器（js引擎）</li>
<li>js运行在浏览器中的内核中的js引擎内部</li>
</ul>
<p>Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）</p>
<h2 id="三、NPM"><a href="#三、NPM" class="headerlink" title="三、NPM"></a>三、NPM</h2><h3 id="1、NPM简介"><a href="#1、NPM简介" class="headerlink" title="1、NPM简介"></a>1、NPM简介</h3><h4 id="1-1、什么是NPM"><a href="#1-1、什么是NPM" class="headerlink" title="1.1、什么是NPM"></a>1.1、什么是NPM</h4><p>NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。</p>
<h4 id="1-2、NPM工具的安装位置"><a href="#1-2、NPM工具的安装位置" class="headerlink" title="1.2、NPM工具的安装位置"></a>1.2、NPM工具的安装位置</h4><p>我们通过npm 可以很方便地下载js库，管理前端工程。</p>
<p>Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules</p>
<ul>
<li>在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">在命令提示符输入 npm -v 可查看当前npm版本</span></span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>



<h3 id="2、使用npm管理项目"><a href="#2、使用npm管理项目" class="headerlink" title="2、使用npm管理项目"></a>2、使用npm管理项目</h3><h4 id="2-1、创建文件夹npm"><a href="#2-1、创建文件夹npm" class="headerlink" title="2.1、创建文件夹npm"></a>2.1、创建文件夹npm</h4><h4 id="2-2、项目初始化"><a href="#2-2、项目初始化" class="headerlink" title="2.2、项目初始化"></a>2.2、项目初始化</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化</span></span><br><span class="line">npm init</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">按照提示输入相关信息，如果是用默认值则直接回车即可。</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">name: 项目名称</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">version: 项目版本号</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">description: 项目描述</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">keywords: &#123;Array&#125;关键词，便于用户搜索到我们的项目</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">我们之后也可以根据需要进行修改。</span></span><br></pre></td></tr></table></figure>

<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">如果想直接生成 package.json 文件，那么可以使用命令</span></span><br><span class="line">npm init -y</span><br></pre></td></tr></table></figure>

<h4 id="2-3、修改npm镜像"><a href="#2-3、修改npm镜像" class="headerlink" title="2.3、修改npm镜像"></a>2.3、修改npm镜像</h4><p>NPM官方的管理的包都是从 <a target="_blank" rel="noopener" href="http://npmjs.com下载的,但是这个网站在国内速度很慢./">http://npmjs.com下载的，但是这个网站在国内速度很慢。</a></p>
<p>这里推荐使用淘宝 NPM 镜像 <a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a> ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。</p>
<p><strong>设置镜像地址：</strong></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载</span></span><br><span class="line">npm config set registry https://registry.npm.taobao.org </span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">查看npm配置信息</span></span><br><span class="line">npm config list</span><br></pre></td></tr></table></figure>

<h4 id="2-4、npm-install命令的使用"><a href="#2-4、npm-install命令的使用" class="headerlink" title="2.4、npm install命令的使用"></a>2.4、npm install命令的使用</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">使用 npm install 安装依赖包的最新版，</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">模块安装的位置：项目目录\node_modules</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 &lt;dependencies&gt;</span></span><br><span class="line">npm install jquery</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">npm管理的项目在备份和传输的时候一般不携带node_modules文件夹</span></span><br><span class="line">npm install #根据package.json中的配置下载依赖，初始化项目</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">如果安装时想指定特定的版本</span></span><br><span class="line">npm install jquery@2.1.x</span><br></pre></td></tr></table></figure>



<h2 id="四、模块化开发"><a href="#四、模块化开发" class="headerlink" title="四、模块化开发"></a>四、模块化开发</h2><h3 id="1、模块化简介"><a href="#1、模块化简介" class="headerlink" title="1、模块化简介"></a>1、模块化简介</h3><h4 id="1-1、模块化产生的背景"><a href="#1-1、模块化产生的背景" class="headerlink" title="1.1、模块化产生的背景"></a>1.1、模块化产生的背景</h4><p>随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。</p>
<p><img src="D:\Downloads\学习\java\课件\课件\images\2.前端基础知识\image-20220222094939898.png" alt="image-20220222094939898"></p>
<p>Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。</p>
<p>但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，更遑论”模块”（module）了。</p>
<h4 id="1-2、什么是模块化开发"><a href="#1-2、什么是模块化开发" class="headerlink" title="1.2、什么是模块化开发"></a>1.2、什么是模块化开发</h4><p>传统非模块化开发有如下的缺点：</p>
<ul>
<li>命名冲突</li>
<li>文件依赖</li>
</ul>
<p>模块化规范：</p>
<ul>
<li><p>CommonJS模块化规范</p>
</li>
<li><p>ES6模块化规范</p>
</li>
</ul>
<h3 id="2、ES6模块化写法（一）"><a href="#2、ES6模块化写法（一）" class="headerlink" title="2、ES6模块化写法（一）"></a>2、ES6模块化写法（一）</h3><p>每个文件就是一个模块，有自己作用域。在一个文件里定义的变量、函数、类，都是私有的，对其他文件不可见。ES6使用 export 和 import 来导出、导入模块。</p>
<h4 id="2-1、导出模块"><a href="#2-1、导出模块" class="headerlink" title="2.1、导出模块"></a>2.1、导出模块</h4><p>创建 src&#x2F;userApi.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getList</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;获取数据列表&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">save</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;保存数据&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-2、导入模块"><a href="#2-2、导入模块" class="headerlink" title="2.2、导入模块"></a>2.2、导入模块</h4><p>创建 src&#x2F;userComponent.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//只取需要的方法即可，多个方法用逗号分隔</span></span><br><span class="line"><span class="keyword">import</span> &#123; getList, save &#125; <span class="keyword">from</span> <span class="string">&quot;./userApi.js&quot;</span></span><br><span class="line"><span class="title function_">getList</span>()</span><br><span class="line"><span class="title function_">save</span>()</span><br></pre></td></tr></table></figure>

<p><strong>注意：这时程序无法运行，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。</strong></p>
<h4 id="2-3、安装Babel"><a href="#2-3、安装Babel" class="headerlink" title="2.3、安装Babel"></a>2.3、安装Babel</h4><p>Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行</p>
<p><strong>安装命令行转码工具</strong></p>
<p>Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install --global babel-cli</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">查看是否安装成功</span></span><br><span class="line">babel --version</span><br></pre></td></tr></table></figure>

<h4 id="2-4、配置-babelrc"><a href="#2-4、配置-babelrc" class="headerlink" title="2.4、配置.babelrc"></a>2.4、配置.babelrc</h4><p>Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则，将es2015规则加入 .babelrc：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;presets&quot;</span>: [<span class="string">&quot;es2015&quot;</span>],</span><br><span class="line">    <span class="string">&quot;plugins&quot;</span>: []</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-5、安装转码器"><a href="#2-5、安装转码器" class="headerlink" title="2.5、安装转码器"></a>2.5、安装转码器</h4><p>在项目中安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev babel-preset-es2015</span><br></pre></td></tr></table></figure>

<h4 id="2-6、转码"><a href="#2-6、转码" class="headerlink" title="2.6、转码"></a>2.6、转码</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">整个目录转码</span></span><br><span class="line">mkdir dist1</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">--out-dir 或 -d 参数指定输出目录</span></span><br><span class="line">babel src -d dist1</span><br></pre></td></tr></table></figure>

<h4 id="2-7、运行程序"><a href="#2-7、运行程序" class="headerlink" title="2.7、运行程序"></a>2.7、运行程序</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node dist1/userComponent.js</span><br></pre></td></tr></table></figure>



<h3 id="3、ES6模块化写法（二）"><a href="#3、ES6模块化写法（二）" class="headerlink" title="3、ES6模块化写法（二）"></a>3、ES6模块化写法（二）</h3><h4 id="3-1、导出模块"><a href="#3-1、导出模块" class="headerlink" title="3.1、导出模块"></a>3.1、导出模块</h4><p>创建 es6&#x2F;userApi2.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">getList</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;获取数据列表2&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">save</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;保存数据2&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-2、导入模块"><a href="#3-2、导入模块" class="headerlink" title="3.2、导入模块"></a>3.2、导入模块</h4><p>创建 es6&#x2F;userComponent2.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">&quot;./userApi2.js&quot;</span></span><br><span class="line">user.<span class="title function_">getList</span>()</span><br><span class="line">user.<span class="title function_">save</span>()</span><br></pre></td></tr></table></figure>

<h4 id="3-3、转码"><a href="#3-3、转码" class="headerlink" title="3.3、转码"></a>3.3、转码</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">整个目录转码</span></span><br><span class="line">mkdir dist2</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">--out-dir 或 -d 参数指定输出目录</span></span><br><span class="line">babel es6 -d dist2</span><br></pre></td></tr></table></figure>

<h4 id="3-4、运行程序"><a href="#3-4、运行程序" class="headerlink" title="3.4、运行程序"></a>3.4、运行程序</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node dist2/userComponent2.js</span><br></pre></td></tr></table></figure>

 
      <!-- reward -->
      
      <div id="reword-out">
        <div id="reward-btn">
          Donate
        </div>
      </div>
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>Copyright： </strong>
          
          Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://example.com/2023/03/04/%E7%AC%AC%E4%BA%8C%E7%AF%87%E6%96%87%E7%AB%A0/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2023/03/04/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            第一篇文章
          
        </div>
      </a>
    
    
  </nav>

  
   
  
   
    <script src="https://cdn.staticfile.org/twikoo/1.4.18/twikoo.all.min.js"></script>
    <div id="twikoo" class="twikoo"></div>
    <script>
        twikoo.init({
            envId: ""
        })
    </script>
 
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2015-2023
        <i class="ri-heart-fill heart_icon"></i> John Doe
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="聪葱聪"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E6%97%85%E8%A1%8C/">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" target="_blank" rel="noopener" href="http://shenyu-vip.lofter.com">摄影</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">友链</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2019/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->
 
<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: ".tocbot",
    contentSelector: ".article-entry",
    headingSelector: "h1, h2, h3, h4, h5, h6",
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: "main",
    positionFixedSelector: ".tocbot",
    positionFixedClass: "is-position-fixed",
    fixedSidebarOffset: "auto",
  });
</script>

<script src="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.staticfile.org/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->
 
<link rel="stylesheet" href="/css/clipboard.css">
 <script src="https://cdn.staticfile.org/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>
 
<!-- CanvasBackground -->

<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
</body>

</html>